import { PackageManagerTabs } from "../../../../../src/theme/PackageManagerTabs";

# Svelte

基于 `Farm` 创建一个 `Svelte` 项目。

`Farm` 提供两种方案来支持创建 `Svelte` 项目: 
- 使用 `create-farm` 脚手架创建脚手架项目
- 你可以根据当前文档手动创建一个 `Svelte` 项目

### 创建 Svelte 项目

<PackageManagerTabs command="npm create farm@latest" />

在 `Select Framework` 中选择 `Svelte` 模版

:::warning Svelte
对于 `Svelte` 的支持, `Farm` 推荐使用 `Vite` 插件。
:::

```javascript title="farm.config.ts"
import { defineConfig } from '@farmfe/core'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  vitePlugins: [svelte()],
})

```

```javascript title="svelte.config.ts"
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  preprocess: vitePreprocess(),
}
```

开发环境时运行

<PackageManagerTabs command="npm run dev" />

在生产环境下进行打包

<PackageManagerTabs command="npm run build" />

预览生产环境打包之后构建的产物

<PackageManagerTabs command="npm run preview" />

如若想查看示例详情: [Svelte 示例](https://github.com/farm-fe/farm/tree/main/examples/vite-adapter-svelte)
